<template>
  <div>
    <div v-if="!['tray', 'reel', 'package', 'InnerBox'].includes(config.id)">
      <el-form label-width="6vw">
        <el-form-item :label="$t('editFormula.partNo')">
          <el-input
            v-model="config.code"
            :placeholder="$t('editFormula.partNo')"
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('editFormula.describe')">
          <el-input
            v-model="config.description"
            :placeholder="$t('editFormula.describe')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('editFormula.long')">
          <el-input-number
            v-model="config.length"
            :placeholder="$t('editFormula.long')"
            readonly
          ></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('editFormula.width')">
          <el-input-number
            v-model="config.width"
            :placeholder="$t('editFormula.width')"
            readonly
          ></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('editFormula.coordinateX')">
          <el-input-number
            v-model="config.x"
            :placeholder="$t('editFormula.coordinateX')"
          ></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('editFormula.coordinateY')">
          <el-input-number
            v-model="config.y"
            :placeholder="$t('editFormula.coordinateY')"
          ></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('editFormula.rotation')">
          <el-input-number
            v-model="config.angle"
            :placeholder="$t('editFormula.rotation')"
          ></el-input-number>
        </el-form-item>
      </el-form>
    </div>
    <component :is="config.type" :config="config"></component>
  </div>
</template>
<script setup>
import { computed, watch } from "vue";
import editStore from "@/store/editStore.js";
import { useI18n } from "vue-i18n";

const { t: $t } = useI18n();
const store = editStore();
const config = computed(() => store.selectedComponent);
</script>
<style scoped lang="scss">
.el-form-item {
  margin-bottom: 10px;
}
.el-input-number {
  width: 100%;
}
</style>
